<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-04-07 10:05:07
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-04-19 16:47:43
-->
<template>
    <div class="ally_box" 
         v-loading="loading"
        element-loading-text="拼命加载中,请耐心等待，不要重复点击页面"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.7)"
    >
    
        <div class="ally_name_top">
            
            <h3>&#8194;Weekly Report</h3>
        </div>
        <div class="topscrice">
            <div>
               <span> Gategory:&#8195;</span>
                <el-select v-model="value" placeholder="请选择" @change="getSelects">
                    <el-option ref="flowere" v-for="item in options" :key="item.cat_code" :label="item.cat_desc"
                        :value="item.cat_code">
                    </el-option>
                </el-select>&#8195;
               <span> Brand:&#8195;</span>

                 <el-select v-model="selectsite" placeholder="请选择"  @change="getSelects1">
                    <el-option v-for="item in selectoptions" :key="item.organisation_no" :label="item.brand_name" :value="item.organisation_no">
                    </el-option>
                </el-select>&#8195;
                <el-button type="primary" @click="searchlist">submit</el-button>
            </div>
            <div>
                <!-- 请选择youandall -->
               

                <!-- <el-button type="primary" @click="youandalllist">submit</el-button> -->
            </div>
            <!-- <div>
                    请选择排序方式
                <select name="" id="">
                    <option>retail_price</option>
                    <option>rrp_price</option>
                </select>
            </div>
            <div>
                    请选择升降序
                <select name="" id="" @change="sortlist">
                    <option>从高到低</option>
                    <option>从低到高</option>
                </select>
            </div> -->
            <div>
               <span> Order by:&#8195;</span>
            
                <el-cascader :options="sortoption" v-model="sortList" clearable
                    @change="sortlist(sortList, ally_list)"></el-cascader>
            </div>
        </div>



        <h3 class="resultnum">&#8194;Result&#8195;{{ this.ally_list.length }} </h3>

                
        <div class="ally_listbox" 
   
    
         >
            <div v-for="(item, index) in ally_list" :key="index">
                <p class="products">{{ item.product }}</p>
               
                <p>
                     {{ item.style_desc }}
                </p>
                <div class="imgs">
                    <img :src="item.img_url" alt="图片加载失败"  :onerror="defalutUrl">
                </div>
               <p>
                   
                </p>
                <p>
                    <span> LW Sold QTY:&#8194;</span>
                    {{ item.LW_t_sales_qty}}
                </p>
                 <p>
                    <span> LW Sold AMT:&#8194;</span>
                    {{ item.LW_t_sales_amt}}
                </p>
                <p>
                    Receipt QTY
                   :&#8194;{{ item.receipt_qty }}
                </p>
                <p>
                   Selling Price:&#8194;{{ item.retail_price }}
                </p>
                <p>
                    original price:&#8194;{{ item.rrp_price }}
                </p>

              
                 <p>
                   Range:&#8194;{{ item.style_range }}
                </p>
            </div>
        </div>

        <!-- <div>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagenum" :page-sizes="[30, 50, 200, 500]" :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="ally_list.length">
                </el-pagination>
            </div>

        </div> -->
    </div>
</template>

<script>
export default {

    data() {
        return {
   
    //           loading: this.$loading({
    //     lock: true,
    //     text: "数据加载中",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)"
    //   }),
    loading:false,
           selectsite:'',
          selectoptions: [{
          value: '1',
          label: 'ALLY'
        }, {
          value: '10',
          label: 'YOU+ALL'
        }],
            sortList: '',
            sortoption:
                [
                    {
                        value: 'LW_t_sales_qty',
                        label: 'LW_t_sales_qty',
                        children: [{
                            value: 'Ascending',
                            label: '升序'
                        }, {
                            value: 'Descending',
                            label: '降序'
                        }]
                    },
                   
                ],
            options: [],
            options_you: [],
            youandall: [],
            allyfashionlist: [],
            value: '',
            checkedname: {},
  
            ally_list: [],
            type_list: '',
            sitename:'',
            defalutUrl: 'this.src="' + require('../assets/allyllist.png') + '"',
        }
    },
    methods: {
        selectoptionslist(){
       (this.$http.post('/api/selectoption/selectoptionList', {
            })).then(res => {
               this.selectoptions=res.data.data
               console.log(res,'res');
            }).catch( error => console.log(this.$message.error(error)))
        },
        async searchlist() {
            
            const { checkedname,sitename } = this
            if(checkedname&&sitename){
            this.loading=true;

            }else{
                    this.$message.error("请先选择数据");
            }
            console.log(this.checkedname.cat_desc, ' this.checkedname');
            console.log(this.sitename, ' this.sitename');
            (this.$http.post('/api/list/searchlist', {
                sitename,cat_code:checkedname.cat_code
            })).then(res => {
          
                // res.data.data.sort((a, b) => {
                //     return a.LW_t_sales_qty - b.LW_t_sales_qty
                //     // a.retail_price-b.retail_price
                // })
                this.ally_list = res.data.data
                if(res.data.data){
            this.loading=false;

                }
                if(sitename=='1'){
                this.type_list = 'ALLY'
                }else{
                this.type_list = 'YOU+ALL'
                }
            }).catch( error => console.log(this.$message.error(error)));
        },
        // youandalllist() {
        //     const { checkedname1 } = this
        //     console.log(this.checkedname1, ' this.checkedname');
        //     (this.$http.post('/api/youandall/searchlist', checkedname1)).then(res => {

        //         res.data.data.sort((a, b) => {
        //             return a.retail_price - b.retail_price
        //             // a.retail_price-b.retail_price
        //         })
        //         console.log(res.data.data, 'ressdsaaassadsaddatab');
        //         this.ally_list = res.data.data
        //         this.type_list = 'YOU+ALL'
        //         console.log(this.youandall, 'this.allussa');

        //     });
        // },
        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        // handleCurrentChange(val) {
        //     console.log(`当前页: ${val}`);
        // },
        getSelects(val) {
            console.log(val, 'val');
            let obj = {};
            obj = this.options.find((item) => {
                return item.cat_code === val;
            });
            this.checkedname = obj
            console.log(this.checkedname, ' this.checkedname');
        },
        getSelects1(val) {
            // console.log(val, 'val');
            // let obj = {};
            // obj = this.options_you.find((item) => {
            //     return item.cat_code === val;
            // });
            // this.checkedname1 = obj
            // console.log(this.checkedname1, ' this.checkedname');
            this.sitename=val
        },
        listget() {
            this.$http.post('/api/user/search').then(res => {
                this.options = res.data.data
                //   console.log(this.options);
            }).catch( error => console.log(this.$message.error(error)))
        },
        listget_one() {
            this.$http.post('/api/user/search').then(res => {
                this.options_you = res.data.data
                //  this.options_you.sort(())
                console.log(this.options_you, 'this.option_uyou');

                console.log(this.options_you, ' this.options_you this.options_you');
            }).catch( error => console.log(this.$message.error(error)))
        },
        sortlist(sortList, ally_list) {
            console.log(sortList);
            this.Sortthelist(sortList, ally_list)
        },
        Sortthelist(sortList, ally_list) {

            console.log(sortList[0], '1122121');
            console.log(sortList[1], '1122121');
            // console.log(ally_list.retail_price,'retail_priceretail_priceretail_price');
            if (sortList[1] == 'Ascending') {
                ally_list.sort((a, b) => {
                    console.log();
                    return a[sortList[0]] - b[sortList[0]]
                    // a.retail_price-b.retail_price
                })
            } else {
                ally_list.sort((a, b) => {
                    console.log(b);
                    return b[sortList[0]] - a[sortList[0]]
                    // a.retail_price-b.retail_price
                })
            }
        },
        
    },
    created() {
        this.listget()
        this.listget_one()
        this.selectoptionslist()
    }
}
</script>


<style lang="scss" scoped>
.ally_listbox {
    display: flex;
    flex-wrap: wrap;
}

.ally_listbox div {
    width: 9%;
    padding: 10px 6px;
    /* margin-bottom: 60px; */
    /* margin-top: 3px; */

    img {
        width: 100%;
    }

    p {
        font-size: 12px;
    }
}
 
.imgs{
        width: 100% !important;
        height: 193px;
  img{
      width: 100%;
      height: 100%;
  }

}
.topscrice {
    display: flex;

}
    .topscrice>div {
        margin: 5px 10px;
    }


.products{
    width: 90px;
    height: 50px;
}

.ally_name_top{
    width: 100%;
    background: #ccc;
    height: 50px;
    line-height: 50px;

}
.topscrice>div>span{
    font-size: 16px;
    font-weight: 600;
}
.ally_box{
    margin: 0px 20px;
      width: 100%; 
       height:100%;
       top:0px;
       left:0px;
       position:absolute;
       z-index: 1999;
}
@media print 
{
    /* .topscrice{
           display: none;
     } */
/* .ally_name_top{
    display: none;
} */
/* .products{
    display: none;
} */
.resultnum{
    /* display: none; */
    margin-bottom: 400px;
}
.ally_listbox div {
    width: 9%;
    padding: 10px 6px;
    margin-bottom: 60px;
    margin-top: 3px;
}
   @page
   {
       size: 420mm 297mm;  
       orientation :landscape
  }
}
</style>